<script setup lang="ts">
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import {useForm} from "vee-validate";
import {FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage} from "~/components/ui/form";
import {Input} from "~/components/ui/input";
import {toast} from "~/components/ui/toast";

const modelValue = defineModel()


const isOpen = ref<boolean>(false)

type TypeForm = {
  name: string,
  label: string,
  placeholder: string,
  type: string,
}

const forms = ref<TypeForm[]>([
  {
    name: 'name',
    label: 'Название тура',
    placeholder: 'Горные вершины',
    type: 'text'
  },
  {
    name: 'sketch',
    label: 'Краткое описание',
    placeholder: 'Тур по ильменскому заповеднику',
    type: 'text'
  },
])

const { handleSubmit, setErrors } = useForm()

type TypeGenerateButtonInfo = {
  text: string,
  state: string,
}


const generateButtonInfo = ref<TypeGenerateButtonInfo>({
  text: 'Сгенерировать описание',
  state: 'default',
})


const generateDescription = handleSubmit( async (values) => {
  generateButtonInfo.value.text = "Генерирую"
  generateButtonInfo.value.state = "loading"

  const { data, error, response } = await client.generateDescription(values)

  if (data) {
    console.log(data.message)
    generateButtonInfo.value.text = "Сгенерированно"
    generateButtonInfo.value.state = "done"
    modelValue.value = data.message
    setTimeout(() => {
      closeMessage()
      generateButtonInfo.value.text = "Сгенерировать описание"
      generateButtonInfo.value.state = "default"
    }, 3000)

  }
  if (error) {
    if (response.status === 400) {
      setErrors(error)
      generateButtonInfo.value.text = "Сгенерировать описание"
      generateButtonInfo.value.state = "default"
    }
    else {
      console.log(error)
      generateButtonInfo.value.text = "Ошибка генерации"
      generateButtonInfo.value.state = "error"
    }
  }
})

const closeMessage = () => {
  console.log(1)
  isOpen.value = false
}

const openMessage = () => {
  isOpen.value = true
}




</script>

<template>
  <Dialog :open="isOpen">
    <DialogTrigger as-child class="">
      <Button variant="outline" @click="openMessage" class="flex">
        Генерировать описание
      </Button>
    </DialogTrigger>
    <DialogContent class="sm:max-w-[425px] -mt-5">
      <DialogHeader>
        <DialogTitle>Генерировать описание</DialogTitle>
        <DialogDescription>
          Введите название тура и краткое описание. Получите сгенерированное описание.
        </DialogDescription>
      </DialogHeader>
      <form @submit.prevent="generateDescription" class="w-full">
        <FormField v-for="form in forms" :name="form.name" :key="form.name" v-slot="{ componentField }">
          <FormItem v-auto-animate>
            <FormLabel>{{ form.label }}</FormLabel>
            <FormControl>
              <Input :placeholder="form.placeholder" v-bind="componentField" :type="form.type"/>
            </FormControl>
            <FormDescription />
            <FormMessage />
          </FormItem>
        </FormField>
        <Button type="submit" class="w-full text-md mt-5 relative" v-auto-animate>{{ generateButtonInfo.text }}
              <Icon name="line-md:loading-loop" v-if="generateButtonInfo.state === 'loading'" size="2rem" class="absolute right-2"/>
              <Icon name="line-md:confirm-circle" v-if="generateButtonInfo.state === 'done'" size="2rem"  class="absolute right-2"/>
              <Icon name="line-md:close-circle" v-if="generateButtonInfo.state === 'error'" size="2rem"   class="absolute right-2"/>
        </Button>
        <Button @click="closeMessage" variant="outline" type="button" class="w-full flex justify-center items-center mt-5">Закрыть</Button>
      </form>

    </DialogContent>
  </Dialog>
</template>

<style scoped>

</style>